<template>
    <a-menu-item key="reportRoadConditions" @click="handleShow">报告路况</a-menu-item>
    <div>
        <a-modal v-model:visible="isShow" @cancel="cancelSend" ok-text="确认" cancel-text="取消" @ok="handleSend">
            <div class="container-RoadCondition">
                <a-form v-if="isShow" class="form" :model="formState" :rules="rules" ref="formRef">

                    <div class="form-main">
                        <!-- 选择事件类型 -->
                        <a-form-item name="eventTypes" label="事件类型" has-feedback
                            :rules="[{ required: true, message: '请选择事件类型' }]">
                            <a-select placeholder="请选择事件类型" v-model:value="formState.eventTypes">
                                <a-select-option v-for="(item, index) in eventTypes" :key="index" :label="item"
                                    :value="item">{{ item }}</a-select-option>
                            </a-select>
                        </a-form-item>
                        <!-- 添加事件地址 -->
                        <a-form-item label="事件地址" name="address">
                            <a-input placeholder="请输入路况地址(包含事故路段)" v-model:value="formState.address" />
                        </a-form-item>
                        <!-- 填写建筑标识 -->
                        <a-form-item label="&nbsp&nbsp&nbsp建筑标识" name="tag">
                            <a-input placeholder="请输入事故最近的建筑标识" v-model:value="formState.tag" />
                        </a-form-item>
                        <!-- 选择发生时间 -->
                        <a-form-item name="date" label="发生时间" v-bind="config">
                            <a-date-picker class="time-item" show-time format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss" v-model:value="formState['date']" />
                        </a-form-item>
                        <!-- 填写事件描述 -->
                        <a-form-item label="&nbsp&nbsp&nbsp事件描述" name="description">
                            <a-input placeholder="请输入事故的具体信息" v-model:value="formState.description" />
                        </a-form-item>
                    </div>

                </a-form>
            </div>
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">报告路况</div>
            </template>
            <template #modalRender="{ originVNode }">
                <div :style="transformStyle">
                    <component :is="originVNode" />
                </div>
            </template>
        </a-modal>
    </div>

</template>
<script setup>
import axios from 'axios'
import { message } from "ant-design-vue";
import { ref, computed, watch, watchEffect, reactive, onMounted } from "vue";
/* 实现拖拽 */
import { useDraggable } from '@vueuse/core';
let isShow = ref(false);
const formRef = ref();
/* 定义表单元素 */
const formState = reactive({
    address: "",
    tag: "",
    description: "",
    date: "",
    eventTypes: "",
    dialogVisible: false,
});
/* 事件类型选择 */
const eventTypes = reactive([
    "碰撞",
    "刮擦",
    "追尾",
    "碾压",
    "翻车",
    "失火",
    "其他",
]);
/* 规则校验 */
const rules = {
    address: [
        {
            required: true,
            message: "请输入事件地址",
            trigger: "blur",
        },
    ],
};
const config = {
    rules: [
        {
            type: "string",
            required: true,
            message: "请选择发生时间",
        },
    ],
};
/* 点击报告路况显示表单 */
function handleShow() {
    isShow.value = !isShow.value;
}
/* 点击取消隐藏表单 */
function cancelSend() {
    isShow.value = false;
    message.info("取消提交")
    /* 重置 */
    formRef.value.resetFields();
}


/* 点击提交表单 */
function handleSend() {
    if (formState.description == "" || formState.tag == "" || formState.date == "") {
        message.error("内容不能为空")
    } else {
        //定义发送表单数据
        const data = {
            user_id: 3,
            event_type: formState.eventTypes,
            event_addr: formState.address,
            event_mark: formState.tag,
            event_time: formState.date,
            event_descibe: formState.description,
            event_status: 0,
        }
        /* 发送请求 */
        axios.post("http://localhost:3000/gg_event", data).then((res) => {

            console.log(res);
            if (res.data.code == 0) {
                message.success("提交成功")
            }
            isShow.value = false;
            formRef.value.resetFields();
        });
    }

};


/* ------------------------------------ */
const modalTitleRef = ref(null);
/* const showModal = () => {
    visible.value = true;
}; */
const {
    x,
    y,
    isDragging,
} = useDraggable(modalTitleRef);
const handleOk = e => {
    console.log(e);
    visible.value = false;
};
const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
watch([x, y], () => {
    if (!startedDrag.value) {
        startX.value = x.value;
        startY.value = y.value;
        const bodyRect = document.body.getBoundingClientRect();
        const titleRect = modalTitleRef.value.getBoundingClientRect();
        dragRect.value.right = bodyRect.width - titleRect.width;
        dragRect.value.bottom = bodyRect.height - titleRect.height;
        preTransformX.value = transformX.value;
        preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
});
watch(isDragging, () => {
    if (!isDragging) {
        startedDrag.value = false;
    }
});
watchEffect(() => {
    if (startedDrag.value) {
        transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
        transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
    }
});
const transformStyle = computed(() => {
    return {
        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
});
</script>
<style scoped>
.container-RoadCondition {
    margin: 0;
    padding: 0;
}

.ant-modal-content {
    border-radius: 50px;
}

.time-item {
    width: 100%
}

/* 


.form-title {
  
  font-size: 18px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
  height: 60px;
  display: flex;
  justify-content: right;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 15px;
  padding-top: 6px;
}
.ant-btn {
  margin-left: 10px;

  border-radius: 5px;
} */
.form-main {
    padding: 0px 60px;
    padding-top: 15px;
}
</style>
